<template>
  <header>
    <div class="canvas" ref="echartsRef"></div>
    <RouterView></RouterView>
  </header>
</template>

<script setup>
// use 按需引入，减少echarts的体积
import { CanvasRenderer } from "echarts/renderers";
import { init, use, registerTheme } from "echarts/core";
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  DataZoomComponent,
} from "echarts/components";
import { LineChart, BarChart } from "echarts/charts";

import mytheme from "@/mytheme.project.json";
import { RouterView } from "vue-router";
import { onMounted, ref, onUnmounted, watch } from "vue";

use([
  CanvasRenderer,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  DataZoomComponent,
  LineChart,
  BarChart,
]);

const echartsRef = ref(null);
const listData = ref([]);
let myEchart = null;
// 注册主题
registerTheme("mytheme", mytheme.theme);
const initChart = () => {
  myEchart = init(echartsRef.value, "mytheme", {
    // width: 400,
    // height: 400,
    locale: "ZH",
    // devicePixelRatio: window.devicePixelRatio,
  });
  setTimeout(() => {
    const data = {
      mary: [10, 20, 30, 40],
      mark: [20, 10, 40, 20],
    };
    listData.value = data;
    let options = {
      xAxis: {
        data: ["一", "二", "三", "四"],
      },
      yAxis: {},
      aria: {
        enabled: true,
        decal: {
          show: true,
        },
      },
      dataZoom: [
        {
          show: true,
          type: "slider",
          start: 70,
          end: 100,
        },
        // {
        //   show: true,
        //   type: "inside",
        //   start: 70,
        //   end: 100,
        // },
        {
          show: true,
          yAxisIndex: 0,
          // filterMode: "empty",
          width: 10,
          height: "20%",
          showDataShadow: false,
          left: "93%",
        },
      ],
      toolbox: {
        show: true,
        feature: {
          saveAsImage: {
            show: true,
          },
          dataView: {
            show: true,
          },
        },
      },
      legend: {
        show: false,
        type: "scroll",
        align: "right",
        emphasis: {
          selectorLabel: {
            show: true,
          },
        },
        itemGap: 50,
        height: 130,
        itemWidth: 30,
        itemHeight: 30,
        orient: "horizontal",
        backgroundColor: "yellow",
        borderWidth: 5,
        padding: 0,
        top: 10,
        left: 0,
        borderColor: "#000",
        // icon: "image://http://localhost:5173/image/rabbit.svg",
        // icon: 'rect',
        // formatter: 'Legend {name}',
        formatter: function (name) {
          let numAll = data[name].reduce((a, b) => a + b);
          return name + ":" + numAll;
        },
        itemStyle: {
          decal: {
            symbol: "triangle",
          },
          borderWidth: 50,
          borderColor: "red",
        },
        lineStyle: {
          width: 10,
          opacity: 1,
          type: "dotted",
          dashOffset: 20,
          shadowColor: "rgba(0, 0, 0, 1)",
          shadowBlur: 10,
          shadowOffsetX: 10,
          cap: "round",
          join: "bevel",
        },
        // selectedMode: 'multiple',
        // selected: {
        //   mark: false,
        //   mary: true
        // },
        // selector: [
        //   {
        //     type: 'all',
        //     title: '全选'
        //   },
        //   {
        //     type: 'reverse',
        //     title: '反选'
        //   }
        // ]
      },
      tooltip: {
        alwaysShowContent: false,
        renderMode: "html", // richText | html,
        trigger: "axis", // axis | item | none
        triggerOn: "mousemove | click", // mousemove | click
        className: "content1",
        textStyle: {
          color: "#fff",
        },
        position: function (pointer) {
          return [pointer[0] + 10, pointer[1] + 10];
        },
        // formatter: '{a},{b},{c},{d}',
        formatter: function (params) {
          let valueData = params.sort((a, b) => b.value - a.value);
          return `<div>
              <h6>销售量排行：星期${params[0].axisValueLabel}</h6>
              <div class="sale">
                <img src="/image/first.svg">
                <span class="first" style="color: ${valueData[0].color}">${valueData[0].seriesName}:${valueData[0].value}</span>
              </div>
              <div class="sale">
                <img src="/image/second.svg">
                <span>${valueData[1].seriesName}:${valueData[1].value}</span>
              </div>
            </div>
          `;
        },
        // valueFormatter: function(value) {
        //   // valueFormatter 只修改值的部分，且优先级低于formatter
        //   return value + '个'
        // }
        axisPointer: {
          type: "cross", // line | shadow | none | cross
        },
      },
      series: [
        // 这里面的每一个对象都代表一个图标
        {
          id: 0,
          // legend 要显示，一定要有name属性
          name: "mark",
          type: "bar",
          data: data.mark,
        },
        {
          id: 1,
          name: "mary",
          type: "line",
          data: data.mary,
        },
      ],
    };
    myEchart.setOption(options);
  }, 1000);
};

watch(listData, () => {
  let keys = Object.keys(listData.value);
  let sortArr = keys.sort((a, b) => {
    let numA = listData.value[a].reduce((a, b) => a + b);
    let numB = listData.value[b].reduce((a, b) => a + b);
    return numB - numA;
  });
  let newData = sortArr.map((item, index) => {
    if (index === 0) {
      return {
        name: item,
        textStyle: {
          color: "red",
        },
      };
    } else {
      return {
        name: item,
      };
    }
  });
  myEchart.setOption({
    legend: {
      data: newData,
    },
  });
});
onMounted(() => {
  initChart();
});
onUnmounted(() => {
  myEchart?.dispose(); // 清理图例
});
</script>

<style lang="less">
header {
  line-height: 1.5;
}
.canvas {
  width: 800px;
  height: 400px;
  position: relative;
}
.content1 {
  background: #000 !important;
  // left: 50% !important;
  // transform: translateX(-50%) !important;
  .sale {
    img {
      width: 20px;
    }
  }
}
</style>
